<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>机构分析</title>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <link rel="stylesheet" href="//cdnhhmk.oss-cn-shenzhen.aliyuncs.com/libs/admin.index.css">
    <link rel="stylesheet" href="//cdnhhmk.oss-cn-shenzhen.aliyuncs.com/libs/admin.reset.css">
    <style>
        .main-container {
            padding: 20px;
            box-sizing: border-box;
            overflow: auto;
        }
        .report-container {
            width: 720px;
            margin-bottom: 20px;
            margin-right: 20px;
            display: inline-block;
            float:left;
        }
        .report-content {
            padding: 20px;
            width: 600px;
            height: 400px;
            position: relative
        }
        .custom-content .search-bar {
            box-sizing: border-box;
            padding: 20px;
        }
    </style>
</head>
<body style="display: none;">
<div id="app" class="container" flex>
    <el-admin-menu :user-detail="userDetail" :menus="menus" @logout="logout">
        <div class="content-container" flex-box=1 flex="dir:top">
            <div flex-box="0" class="tab-menu" flex="cross:center">
                <div class="title" flex-box=0>机构分析</div>
            </div>
            <div flex-box="1">
                <div class="main-container">

                    <!--服务机构情况总表-->
                    <div class="report-container">
                        <el-section-pannel title="服务机构情况总表" border="all" title-padding="0px 20px">
                            <div slot="operator">
                                <el-select v-model="instituteCitySummaryReport_supplierType" placeholder="请选择">
                                    <el-option
                                            v-for="item in supplierTypes"
                                            :key="item.supplierType"
                                            :label="item.supplierName"
                                            :value="item.supplierType"
                                            change="cityChange">
                                    </el-option>
                                </el-select>
                            </div>
                            <div slot="content" class="custom-content">
                                <div class="report-content">
                                    <v-chart ref="instituteCitySummaryReport" :options="instituteCitySummaryReport" />
                                </div>
                            </div>
                        </el-section-pannel>
                    </div>

                    <!--医院情况总表-->
                    <div class="report-container">
                        <el-section-pannel title="医院情况总表" border="all" title-padding="0px 20px">
                            <div slot="content" class="custom-content">
                                <div class="report-content">
                                    <v-chart ref="hospitalTotalReport" :options="hospitalTotalReport" />
                                </div>
                            </div>
                        </el-section-pannel>
                    </div>

                </div>
            </div>
        </div>
    </el-admin-menu>
</div>
<script src="common/config.js"></script>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script>
  window.jQuery || document.write('<script src="//cdn.staticfile.org/jquery/3.1.1/jquery.min.js"><\/script>')

  /**
   * 得到请求链接
   * @param prefix
   * @param path
   */
  function makePath (prefix, path) {
    var reg = new RegExp(/((\.\w+){2}$)/)
    reg.test(window.location.hostname)
    if (path.indexOf('/') !== 0) {
      path = '/' + path
    }
    return window.location.protocol + '//' + prefix + RegExp.$1 + path
  }

  /**
   * 生成折线图的options对象
   * @param title
   */
  function makeOptions (title, options) {
    options.title = {
      text: title
    }
    options.tooltip = {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#6a7985'
        }
      }
    }
    options.backgroundColor = 'rgb(255,255,255)'
    options.toolbox = {
      feature: {
        saveAsImage: {
          title:' '
        }
      }
    }
    options.grid = {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    }
    return options
  }

  /**
   * 初始化options对象
   * 后面有写相同属性就把这里的覆盖
   */
  function extendOptions (options) {
    var init_options = {
      backgroundColor: 'rgb(255,255,255)',
      tooltip : {
        trigger: 'axis',
        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
          type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        }
      },
      toolbox:{
        feature: {
          saveAsImage: {
            title:' '
          }
        }
      }
    }
    $.extend(init_options, options);
    return init_options;
  }
</script>
<script src="testdata/test_data.js"></script>
<script src="//cdnhhmk.oss-cn-shenzhen.aliyuncs.com/libs/admin.index.js"></script>
<script src="//cdnhhmk.oss-cn-shenzhen.aliyuncs.com/libs/admin.common.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts@4.1.0/dist/echarts.js"></script>
<!-- <script src="./lib/echarts.min.js"></script> -->
<script src="https://cdn.jsdelivr.net/npm/vue-echarts@4.0.2"></script>

<!--服务机构情况总表-->
<script>
  var instituteCitySummaryReportMixins = {
    data:function(){
      return {
        instituteCitySummaryReport: null,
        instituteCitySummaryReport_supplierType: null
      }
    },
    methods:{
      instituteCitySummaryReportFetch:function(){
        var that = this;
        $.base.sendHttpRequest(makePath('report','/instituteCitySummaryReport'), {
            supplierType: that.instituteCitySummaryReport_supplierType
          },
          function(resp){
            console.log(JSON.stringify(resp));
            if(resp.data.reportList){
              var list = resp.data.reportList||[];
              that.instituteCitySummaryReport = extendOptions(
                {
                  title: {
                    text: '服务机构情况总表'
                  },
                  color: ['#FB7171'],
                  xAxis : [
                    {
                      type : 'category',
                      data : list.map(function (item) {
                        return item.city
                      }),
                      axisTick: {
                        alignWithLabel: true
                      }
                    }
                  ],
                  yAxis : {
                    type : 'value'
                  },
                  series : [
                    {
                      label: {
                        normal: {
                          show: true,
                          position: 'top'
                        }
                      },
                      name:'机构数',
                      type:'bar',
                      barWidth: '60%',
                      data:list.map(function (item) {
                        return item.instituteCount
                      })
                    }
                  ]
                }
              )
            }
          }, function(complete){}, function(error){})
      },
    },
    mounted:function(){
      this.instituteCitySummaryReportFetch();
    },
    watch:{
      instituteCitySummaryReport_supplierType:function (val) {
        this.instituteCitySummaryReport_supplierType = val;
        this.instituteCitySummaryReportFetch();
      }
    }
  }
</script>

<!--医院情况总表-->
<script>
  var hospitalTotalReportMixins = {
    data:function(){
      return {
        hospitalTotalReport: null,
      }
    },
    methods:{
      //医院情况总表
      hospitalTotalReportFetch(){
        var that = this;
        $.base.sendHttpRequest(makePath('report','/hospitalTotalReportService'), {},
          function(resp){
            console.log(JSON.stringify(resp));
            if(resp.data.reportList){
              var list = resp.data.reportList||[];
              that.hospitalTotalReport = extendOptions(
                {
                  title: {
                    text: '医院情况总表'
                  },
                  color: ['#FB7171'],
                  xAxis : [
                    {
                      type : 'category',
                      data : list.map(function (item) {
                        return item.city
                      }),
                      axisTick: {
                        alignWithLabel: true
                      }
                    }
                  ],
                  yAxis : {
                    type : 'value'
                  },
                  series : [
                    {
                      label: {
                        normal: {
                          show: true,
                          position: 'top'
                        }
                      },
                      name:'医院数',
                      type:'bar',
                      barWidth: '60%',
                      data:list.map(function (item) {
                        return item.hospitalNum
                      })
                    }
                  ]
                }
              )
            }
          }, function(complete){}, function(error){})
      },
    },
    mounted(){
      this.hospitalTotalReportFetch();
    },
    watch:{
    }
  }
</script>

<script>
  Vue.component('v-chart', VueECharts)
  new Vue({
    el: '#app',
    mixins: [
      $.base.globalMixin,
      instituteCitySummaryReportMixins,
      // activityBlockReportMixins,
      // supplierTypeReportMixins,
      hospitalTotalReportMixins,
      // supplierTypeReport_hengMixins
    ],
    data: function () {
      return {
        username: '',
        enterDate: '',
        visible: false,
        // 来自test_data.js
        menus: [],
        // 来自test_data.js
        userDetail: {},
        initOptions: {},
        runningAreaList:[],
        supplierTypes: [
          {
            supplierType:null,
            supplierName:'全部'
          },
          {
            supplierType:1,
            supplierName:'亲子早教'
          },
          {
            supplierType:2,
            supplierName:'产康'
          },
          {
            supplierType:3,
            supplierName:'医疗机构'
          },
          {
            supplierType:4,
            supplierName:'港澳业务'
          },
          {
            supplierType:5,
            supplierName:'月子中心'
          },
          {
            supplierType:6,
            supplierName:'月嫂'
          },
          {
            supplierType:7,
            supplierName:'摄影'
          },
          {
            supplierType:8,
            supplierName:'母婴产品'
          },
          {
            supplierType:9,
            supplierName:'其他商品'
          },
          {
            supplierType:10,
            supplierName:'广告公司'
          },
          {
            supplierType:11,
            supplierName:'其他合作'
          },
          {
            supplierType:12,
            supplierName:'孕产运动'
          },
          {
            supplierType:13,
            supplierName:'其他类别'
          },
          {
            supplierType:14,
            supplierName:'医院'
          },
          {
            supplierType:15,
            supplierName:'育儿嫂'
          }
        ]
      }
    },
    created(){
      this.getRunningAreaFetch()
    },
    methods: {
      getRunningAreaFetch:function(){
        var that = this;
        $.base.sendHttpRequest(makePath('basic','/getRunningArea'), {},
          function(resp){
            that.runningAreaList = resp.data.runningAreaList
          },
          function(complete){},
          function(error){}
        )
      },
      logout:function() {
        window.location.href = 'login.html'
      }
    },
    mounted:function() {
      document.querySelector('body').style.display = 'block'
    }
  })
</script>
</body>
</html>